<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Redstone红石，前端UI框架</title>
    <meta content="" name="Description">
    <meta content="" name="Keywords">
    <meta charset="UTF-8">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--坑爹的将360默认为极速模式打开-->
    <meta name="renderer" content="webkit">
    <!--移动优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../dist/layout.css" rel="stylesheet" type="text/css">
    <link href="../dist/code.css" rel="stylesheet" type="text/css">
    <link href="../dist/mooshroom.css" rel="stylesheet" type="text/css">
    <style>
        .box-row, .box-col, .box-row-rev, .box-col-rev {
            border-radius: 5px;
            background-color: #e8e8e8;

        }

        .box-row div, .box-col div, .box-row-rev div, .box-col-rev div {
            border-radius: 5px;
            border-color: #959595;
            border-width: 1px;
            box-sizing: border-box;
            border-style: solid;
            background-color: #c4c4c4;
            padding: 5px;
            margin: 5px;
            color: #000000

        }

        .xs {
            width: 30px;
            height: 30px
        }

        .sm {
            width: 50px;
            height: 50px
        }

        .md {
            width: 70px;
            height: 70px
        }

        .lg {
            width: 90px;
            height: 90px
        }

        .xs {
            padding: 30px;
        }

        .sm {
            padding: 50px;
        }

        .md {
            padding: 70px;
        }

        .lg {
            padding: 90px;
        }
    </style>
</head>
<body>
<div class="container">
<h1>
    Redstone--红石前端,UI框架
    <small>布局框架说明文档</small>
</h1>
<hr/>
<h2>flexbox布局框架:</h2>

<h3>盒子排列方向</h3>

<p>将盒子元素的class类设置为box-*，他的一级子元素将安装所设定的规则排列</p>
<h4>普通的从左到右排列</h4>
<p>为父元素添加box-row，子元素将从左至右排列，相当与给每个子元素添加了float:left,再在结尾添加了个元素且添加clear:right</p>

<div class="box-row">
    <div class="xs">
        1
    </div>
    <div class="sm">
        2
    </div>
    <div class="md">
        3
    </div>
    <div class="lg">
        4
    </div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
        class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span
        class="atv">"box-row"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">1</span><span class="tag">&lt;/div&gt;</span><span
        class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">2</span><span class="tag">&lt;/div&gt;</span><span
        class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">3 </span><span class="tag">&lt;/div&gt;</span><span
        class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">4</span><span class="tag">&lt;/div&gt;</span><span
        class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>

<h4>颠倒过来从右至左排列</h4>
<p>为父元素添加box-row-rev，子元素将从右至左排列，</p>
<div class="box-row-rev">
    <div class="xs">
        1
    </div>
    <div class="sm">
        2
    </div>
    <div class="md">
        3
    </div>
    <div class="lg">
        4
    </div>
</div>
    <pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
            class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span
            class="atv">"box-row-rev"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">1</span><span class="tag">&lt;/div&gt;</span><span
            class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">2</span><span class="tag">&lt;/div&gt;</span><span
            class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">3 </span><span class="tag">&lt;/div&gt;</span><span
            class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">4</span><span class="tag">&lt;/div&gt;</span><span
            class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>从上至下排列</h4>
<p>为父元素添加box-col，子元素将从上之下排列，所有的水平、垂直、行的行为方式都将旋转90度</p>
<div class="box-col">
    <div class="xs">
        1
    </div>
    <div class="sm">
        2
    </div>
    <div class="md">
        3
    </div>
    <div class="lg">
        4
    </div>
</div>
    <pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
            class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span
            class="atv">"box-col"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">1</span><span class="tag">&lt;/div&gt;</span><span
            class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">2</span><span class="tag">&lt;/div&gt;</span><span
            class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">3 </span><span class="tag">&lt;/div&gt;</span><span
            class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">4</span><span class="tag">&lt;/div&gt;</span><span
            class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>从下至上排列</h4>
<p>为父元素添加box-col-rev，子元素将从下往上排列，所有的水平、垂直、行的行为方式都将旋转90度</p>

<div class="box-col-rev">
    <div class="xs">
        1
    </div>
    <div class="sm">
        2
    </div>
    <div class="md">
        3
    </div>
    <div class="lg">
        4
    </div>
</div>
   <pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
           class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span
           class="atv">"box-col-rev"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">1</span><span class="tag">&lt;/div&gt;</span><span
           class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">2</span><span class="tag">&lt;/div&gt;</span><span
           class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">3 </span><span class="tag">&lt;/div&gt;</span><span
           class="pln">
    </span><span class="tag">&lt;div&gt;</span><span class="pln">4</span><span class="tag">&lt;/div&gt;</span><span
           class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>

<hr/>
<h3>行的行为方式</h3>

<p>注意若要行的对齐方式生效，需要指定布局元素的高度、并给布局元素限制宽度让内部的内容产生多行，单行貌似没有效果</p>
<h4>行对齐方式-靠顶部对齐</h4>

<div class="box-row row-top warp" style="width: 160px;height: 120px">
    <div class="xs">1</div>
    <div class="xs">2</div>
    <div class="xs">3</div>
    <div class="xs">4</div>
    <div class="xs">5</div>
    <div class="xs">6</div>
    <div class="xs">7</div>
</div>
    <pre class="alive-hover"><code class="prettyprint lang-html"><span class="pln">    </span><span
            class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span
            class="atv">"box-row row-top warp"</span><span class="pln"> </span><span class="atn">style</span><span
            class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span
            class="pln"> </span><span class="lit">160px</span><span class="pun">;</span><span
            class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
            class="lit">120px</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
            class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span
            class="pln">1</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
            class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span
            class="pln">2</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
            class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span
            class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
            class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span
            class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
            class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span
            class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
            class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span
            class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
            class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span
            class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>行对齐方式-靠中间对齐</h4>

<div class="box-row row-center warp" style="width: 160px;height: 120px">
    <div class="xs">1</div>
    <div class="xs">2</div>
    <div class="xs">3</div>
    <div class="xs">4</div>
    <div class="xs">5</div>
    <div class="xs">6</div>
    <div class="xs">7</div>
</div>
        <pre class="alive-hover"><code class="prettyprint lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span
                class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row row-center warp"</span><span
                class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span
                class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span
                class="pln"> </span><span class="lit">160px</span><span class="pun">;</span><span
                class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
                class="lit">120px</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">2</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">3</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">4</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">5</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">6</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">7</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span></code></pre>

<p>如果是单行则没有效果</p>
<div class="box-row row-center warp" style="width: 160px;height: 120px">
    <div class="xs">1</div>
    <div class="xs">2</div>
    <div class="xs">3</div>

</div>
<h4>行对齐方式-靠底部对齐</h4>

<div class="box-row row-bottom warp" style="width: 160px;height: 120px">
    <div class="xs">1</div>
    <div class="xs">2</div>
    <div class="xs">3</div>
    <div class="xs">4</div>
    <div class="xs">5</div>
    <div class="xs">6</div>
    <div class="xs">7</div>
</div>
        <pre class="alive-hover"><code class="prettyprint lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span
                class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row row-bottom warp"</span><span
                class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span
                class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span
                class="pln"> </span><span class="lit">160px</span><span class="pun">;</span><span
                class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
                class="lit">120px</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">2</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">3</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">4</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">5</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">6</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">7</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span></code></pre>
<p>如果是单行则没有效果</p>
<div class="box-row row-center warp" style="width: 160px;height: 120px">
    <div class="xs">1</div>
    <div class="xs">2</div>
    <div class="xs">3</div>

</div>
<h4>行对齐方式-以两头为基准均匀分布</h4>

<div class="box-row row-ends warp" style="width: 160px;height: 120px">
    <div class="xs">1</div>
    <div class="xs">2</div>
    <div class="xs">3</div>
    <div class="xs">4</div>
    <div class="xs">5</div>
    <div class="xs">6</div>
    <div class="xs">7</div>
</div>
        <pre class="alive-hover"><code class="prettyprint lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span
                class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row row-ends warp"</span><span
                class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span
                class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span
                class="pln"> </span><span class="lit">160px</span><span class="pun">;</span><span
                class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
                class="lit">120px</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">2</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">3</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">4</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">5</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">6</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">7</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span></code></pre>
<p>如果是单行则没有效果</p>
<div class="box-row row-ends warp" style="width: 160px;height: 120px">
    <div class="xs">1</div>
    <div class="xs">2</div>
    <div class="xs">3</div>

</div>
<h4>行对齐方式-均匀分布</h4>

<div class="box-row row-aver warp" style="width: 160px;height: 120px">
    <div class="xs">1</div>
    <div class="xs">2</div>
    <div class="xs">3</div>
    <div class="xs">4</div>
    <div class="xs">5</div>
    <div class="xs">6</div>
    <div class="xs">7</div>
</div>
        <pre class="alive-hover"><code class="prettyprint lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span
                class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row row-aver warp"</span><span
                class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span
                class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span
                class="pln"> </span><span class="lit">160px</span><span class="pun">;</span><span
                class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
                class="lit">120px</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">2</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">3</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">4</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">5</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">6</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
                class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">7</span><span
                class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span></code></pre>
<p>如果是单行则没有效果</p>
<div class="box-row row-aver warp" style="width: 160px;height: 120px">
    <div class="xs">1</div>
    <div class="xs">2</div>
    <div class="xs">3</div>

</div>
<h4>行对齐方式-每一行高度一致</h4>

<p>注意如果内部的子元素被限定了高度，子元素的高度将不会以父元素的高度为准</p>

<div class="box-row row-same warp" style="width: 160px;height: 120px">
    <div class="xs" style="height: auto">1</div>
    <div class="xs" style="height: auto">2</div>
    <div class="xs" style="height: auto">3</div>
    <div class="xs" style="height: auto">4</div>
    <div class="xs" style="height: auto">5</div>
    <div class="xs" style="height: auto">6</div>
    <div class="xs" style="height: auto">7</div>
</div>
   <pre class="alive-hover"><code class="prettyprint lang-html"><span class="pln"> </span><span
           class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
           class="pun">=</span><span class="atv">"box-row row-same warp"</span><span class="pln"> </span><span
           class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span
           class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span
           class="lit">160px</span><span class="pun">;</span><span class="pln">height</span><span
           class="pun">:</span><span class="pln"> </span><span class="lit">120px</span><span class="atv">"</span><span
           class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
           class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span
           class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span
           class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
           class="kwd">auto</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">1</span><span
           class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
           class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span
           class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span
           class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
           class="kwd">auto</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">2</span><span
           class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
           class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span
           class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span
           class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
           class="kwd">auto</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">3</span><span
           class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
           class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span
           class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span
           class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
           class="kwd">auto</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">4</span><span
           class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
           class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span
           class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span
           class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
           class="kwd">auto</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">5</span><span
           class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
           class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span
           class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span
           class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
           class="kwd">auto</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">6</span><span
           class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
           class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span
           class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span
           class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span
           class="kwd">auto</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">7</span><span
           class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<p>如果是单行则有效果</p>
<div class="box-row row-same warp" style="width: 160px;height: 120px">
    <div class="xs" style="height: auto">1</div>
    <div class="xs" style="height: auto">2</div>
    <div class="xs" style="height: auto">3</div>

</div>

<h3>水平对齐方式</h3>
<h4>以头为基准靠齐</h4>

<div class="box-row hor-first">
    <div class="xs">1</div>
    <div class="sm">2</div>
    <div class="md">3</div>
    <div class="sm">4</div>
    <div class="lg">5</div>
    <div class="md">6</div>
    <div class="xs">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
        class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row hor-first"</span><span
        class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"lg"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>以最后一个为基准靠齐</h4>

<div class="box-row hor-last">
    <div class="xs">1</div>
    <div class="sm">2</div>
    <div class="md">3</div>
    <div class="sm">4</div>
    <div class="lg">5</div>
    <div class="md">6</div>
    <div class="xs">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
        class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row hor-last"</span><span
        class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"lg"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>以中间为基准靠齐</h4>

<div class="box-row hor-center">
    <div class="xs">1</div>
    <div class="sm">2</div>
    <div class="md">3</div>
    <div class="sm">4</div>
    <div class="lg">5</div>
    <div class="md">6</div>
    <div class="xs">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
        class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row hor-center"</span><span
        class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"lg"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>已两头为基准均匀分布</h4>

<div class="box-row hor-ends">
    <div class="xs">1</div>
    <div class="sm">2</div>
    <div class="md">3</div>
    <div class="sm">4</div>
    <div class="lg">5</div>
    <div class="md">6</div>
    <div class="xs">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
        class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row hor-ends"</span><span
        class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"lg"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>均匀分布</h4>

<div class="box-row hor-aver">
    <div class="xs">1</div>
    <div class="sm">2</div>
    <div class="md">3</div>
    <div class="sm">4</div>
    <div class="lg">5</div>
    <div class="md">6</div>
    <div class="xs">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
        class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row hor-aver"</span><span
        class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"lg"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h3>垂直对齐方式</h3>
<h4>顶部对齐</h4>

<div class="box-row ver-top">
    <div class="xs">1</div>
    <div class="sm">2</div>
    <div class="md">3</div>
    <div class="sm">4</div>
    <div class="lg">5</div>
    <div class="md">6</div>
    <div class="xs">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
        class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row var-top"</span><span
        class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"lg"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>底部对齐</h4>

<div class="box-row ver-bottom">
    <div class="xs">1</div>
    <div class="sm">2</div>
    <div class="md">3</div>
    <div class="sm">4</div>
    <div class="lg">5</div>
    <div class="md">6</div>
    <div class="xs">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
        class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row ver-bottom"</span><span
        class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"lg"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>居中对齐</h4>

<div class="box-row ver-center">
    <div class="xs">1</div>
    <div class="sm">2</div>
    <div class="md">3</div>
    <div class="sm">4</div>
    <div class="lg">5</div>
    <div class="md">6</div>
    <div class="xs">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
        class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row ver-center"</span><span
        class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"lg"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>基准线对齐</h4>

<div class="box-row ver-baseline">
    <div class="xs">1</div>
    <div class="sm">2</div>
    <div class="md">3</div>
    <div class="sm">4</div>
    <div class="lg">5</div>
    <div class="md">6</div>
    <div class="xs">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
        class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row ver-baseline"</span><span
        class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"lg"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>强制高度相等</h4>

<p>若子元素高度为自动，子元素将以父元素的高度调整自身高度</p>

<div class="box-row ver-same" style="height: 120px">
    <div class="xs" style="height: auto">1</div>
    <div class="sm" style="height: auto">2</div>
    <div class="md" style="height: auto">3</div>
    <div class="sm" style="height: auto">4</div>
    <div class="lg" style="height: auto">5</div>
    <div class="md" style="height: auto">6</div>
    <div class="xs" style="height: auto">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span
        class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row ver-same"</span><span
        class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span
        class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"sm"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"lg"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"md"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span
        class="pun">=</span><span class="atv">"xs"</span><span class="pln"> </span><span class="tag">&gt;</span><span
        class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h3>子元素个性行为方式</h3>

<div class="box-row ver-top">
    <div class="change-auto">自动</div>
    <div class="xs change-baseline">以基线</div>
    <div class="sm change-bottom">靠底部</div>
    <div class="md change-center">居中</div>
    <div class="lg change-stretch">以父元素的高度</div>
    <div class="xs change-top">以顶部</div>
    <div class="sm">正常</div>
    <div class="md">正常</div>
    <div class="lg">正常</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row ver-top"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"change-auto"</span><span class="tag">&gt;</span><span class="pln">自动</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"xs change-baseline"</span><span class="tag">&gt;</span><span class="pln">以基线</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"sm change-bottom"</span><span class="tag">&gt;</span><span class="pln">靠底部</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"md change-center"</span><span class="tag">&gt;</span><span class="pln">居中</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"lg change-stretch"</span><span class="tag">&gt;</span><span class="pln">以父元素的高度</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"xs change-top"</span><span class="tag">&gt;</span><span class="pln">以顶部</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">正常</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"md"</span><span class="tag">&gt;</span><span class="pln">正常</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"lg"</span><span class="tag">&gt;</span><span class="pln">正常</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h3>是否换行</h3>
<h4>要换行的</h4>

<p>如果设置了要换行的，子元素将在排不下的时候进行换行</p>

<div class="box-row warp" style="width: 250px">
    <div class="xs">1</div>
    <div class="sm">2</div>
    <div class="md">3</div>
    <div class="sm">4</div>
    <div class="lg">5</div>
    <div class="md">6</div>
    <div class="xs">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row warp"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">250px</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"md"</span><span class="tag">&gt;</span><span class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"lg"</span><span class="tag">&gt;</span><span class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"md"</span><span class="tag">&gt;</span><span class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<h4>不换行的</h4>

<p>如果设置了不换行，子元素挤不下也得挤，所以大家挤公交，宽度就被压缩了，压缩之后的胖子自然也比瘦子胖,但是margin不会被压缩,当padding-left,padding-right被压缩的时候，会先压缩padding-right,padding-left 不会被压缩</p>

<div class="box-row nowarp" style="width: 250px">
    <div class="xs">1</div>
    <div class="sm">2</div>
    <div class="md">3</div>
    <div class="sm">4</div>
    <div class="lg">5</div>
    <div class="md">6</div>
    <div class="xs">7</div>
</div>
<pre class="alive-hover"><code class="prettyprint lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box-row nowarp"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">250px</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">1</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">2</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"md"</span><span class="tag">&gt;</span><span class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"sm"</span><span class="tag">&gt;</span><span class="pln">4</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"lg"</span><span class="tag">&gt;</span><span class="pln">5</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"md"</span><span class="tag">&gt;</span><span class="pln">6</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"xs"</span><span class="tag">&gt;</span><span class="pln">7</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
<hr/>
<!--<h2>12格栅格布局框架</h2>-->

</div>


<script src="../js/avalon.js"></script>
<script src="../js/prettify.js"></script>

<script>
    document.ready(prettyPrint())

</script>

</body>
</html>